<template>
  <div class="page-container">
    <div class="page-head">
    <div class="page-title">
        <p>
          <span style="font-family: '华文行楷', sans-serif;color: #1ABC9C;">数字迎新服务平台</span>
          <span style="font-family: '微软雅黑', sans-serif;"> | 找回密码</span>
        </p>
    </div>
    <div class="content-head">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="账号验证"></el-step>
        <el-step title="重置密码"></el-step>
        <el-step title="完成设置"></el-step>
      </el-steps>
    </div>
  </div>
    <div class="content-body">
      <!-- 第一步：账号验证 -->
      <div v-if="active=='0'">
        <el-form 
        ref="verificationForm" 
        label-position="top" 
        label-width="100px"
        :model="verificationForm"  
        :rules="verificationFormRules" 
        style="max-width: 460px"
        class="demo-ruleForm" @submit.prevent>
          <el-form-item prop="name" label="姓名">
            <el-input v-model="verificationForm.name" type="text" placeholder="请输入你的姓名">
            </el-input>
          </el-form-item>
          <el-form-item prop="idNumber"  label="身份证号">
            <el-input v-model="verificationForm.idNumber" placeholder="请输入身份证号">
            </el-input>
          </el-form-item>
        </el-form>
      <el-button style="margin-top: 12px;" @click="checkIdNum">下一步</el-button>
      <!-- @click="checkIdNum" -->
    </div>
      <!-- 第二步：重置密码 -->
      <div v-if="active=='1'">
        <el-form 
        ref="forgotPasswordForm" 
        label-position="top" 
        label-width="100px"
        :model="forgotPasswordForm" 
        :rules="forgotPasswordFormRules" 
        style="max-width: 460px" 
        class="demo-ruleForm" @submit.prevent>
          <el-form-item prop="pwd" label ="新密码:">
            <el-input v-model="forgotPasswordForm.pwd" type="password" placeholder="6-16位大小写字母+数字组合" auto-complete="off" >
            </el-input>
            </el-form-item>
          <el-form-item prop="confirmPwd" label ="确认密码:">
          <el-input v-model="forgotPasswordForm.confirmPwd" placeholder="重复密码" type="password">
          </el-input>
          </el-form-item>
          </el-form>
          <el-button style="margin-top: 12px;" @click="goPrevious">上一步</el-button>
          <el-button style="margin-top: 20px;margin-left: 0px;"  @click.prevent="resetPassword">下一步</el-button>
          <!-- @click.prevent="resetPassword" -->
          </div>
          <div v-if="active=='2'">
          <div class="reset-success">
             <img :src="require('@/assets/reset.png')" alt="重置密码成功">
          </div>
            <el-button style="margin-top: 12px;" @click="goPrevious">上一步</el-button>
            <el-button style="margin-top: 20px;margin-left: 0px;" @click="$router.push({path:'/login'})">继续登录</el-button>
          </div>
        </div>
  </div>
</template>

<script lang="js">
import { resetPassword, checkIdNum } from "@/api/login";
export default {
name: "forgot-password",
  data(){
    // 身份证号校验
    const validateIdNumber = (rule, value, callback) => {
      if (!value) {
    return callback()
  }
  let city = {
    11: '北京',12: '天津',13: '河北',14: '山西',15: '内蒙古',21: '辽宁',22: '吉林',23: '黑龙江',31: '上海',
    32: '江苏',33: '浙江',34: '安徽',35: '福建',36: '江西',37: '山东',41: '河南',42: '湖北 ',43: '湖南',44: '广东',
    45: '广西',46: '海南',50: '重庆',51: '四川',52: '贵州',53: '云南',54: '西藏',61: '陕西',62: '甘肃',63: '青海',
    64: '宁夏',65: '新疆',71: '台湾',81: '香港',82: '澳门',91: '国外'
  }
  if (!value || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(value)) {
    callback(new Error('身份证号格式错误'))
  } else if (!city[value.substr(0, 2)]) {
    callback(new Error('身份证号格式错误'))
  } else {
    // 18位身份证需要验证最后一位校验位
    if (value.length === 18) {
      const code = value.split('')
      // ∑(ai×Wi)(mod 11)
      // 加权因子
      const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
      // 校验位
      const parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
      let sum = 0
      let ai = 0
      let wi = 0
      for (let i = 0; i < 17; i++) {
        ai = code[i]
        wi = factor[i]
        sum += ai * wi
      }
      if (parity[sum % 11].toString() !== code[17]) {
        callback(new Error())
      }
    }
  }
  callback()
  }
  //密码验证
  let validateConfirmPass = (rule, value, callback) => {
    if (value !== this.forgotPasswordForm.pwd) {
      callback(new Error('两次输入密码不一致,请重新输入'));
    } else {
      callback();
    }
  };
  return{
    active: 0,
    verificationForm:{
      name: '',
      idNumber: ''
    },
    forgotPasswordForm:{
      pwd:'',
      confirmPwd:''
    },
    options: [],
    verificationFormRules:{
      name: [{
            required: true,
            message: '请输入你的姓名',
            trigger: 'blur'
          }
        ],
        idNumber: [{
          required: true,
          message: '请输入你的身份证号',
          trigger: 'blur'
        },
          {
            validator: validateIdNumber,
            trigger: 'blur'
          }
      ]
    },
    forgotPasswordFormRules: {
      pwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 16, message: '长度在6-16位之间',trigger: "blur" },
        {pattern: new RegExp("^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{6,16}$") , message: '密码为6-16位大小写字母+数字组合，请重新输入',trigger: "blur" }
      ],
      confirmPwd: [
        { required: true, message: '请输入确认密码', trigger: 'blur' },
        { validator: validateConfirmPass, trigger: 'blur' },
        { min: 6, max: 16, message: '长度在6-16位之间',trigger: "blur" },
        {pattern: new RegExp("^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{6,16}$") , message: '密码为6-16位大小写字母+数字组合，请重新输入',trigger: "blur" }
      ],
    }

  }
  },
  methods:{
    goPrevious() {
      if (this.active > 0) {
      this.active--;
      }
    },
    next() {
      if (this.active++ > 2) this.active = 0;
    },

    //验证身份
    checkIdNum() {
      this.$refs.verificationForm.validate(valid => {
        if (valid) {
          checkIdNum({
          username: this.verificationForm.name,
          identity: this.verificationForm.idNumber
          }).then(resp => {
        let code = resp.data.code;
        if (code === 200) {
          this.forgotPasswordForm.account=this.verificationForm.account;
          this.active++
        }
        });
        }
      });
    },
  //重置密码
  resetPassword(){
    this.$refs.forgotPasswordForm.validate(valid => { 
      if (valid) { 
        var _this = this;
        resetPassword({
          identity:this.verificationForm.idNumber,
          password: this.forgotPasswordForm.confirmPwd,
        }).then((resp) => {
          let code=resp.data.code;
          if(code===200){
            _this.$message.success('密码重置成功');
            _this.$router.push('/login'); 
            this.active++
          }
        });
      }
    })
  }
  }
}
</script>

<style scoped lang="less">
.page-container {
  width: 100vw;
  height: 100vh;
  .page-head{
    display: flex;
    background-color: rgb(242, 242, 242);
    flex-wrap:wrap;
  .page-title{
  top: 13px;
  width: 260px; 
  height: 58px;
  box-sizing: border-box;
  border-width: 2px;
  border-style: solid;
  border-left: 0px;
  border-top: 0px;
  border-right: 0px;
  font-size: 20px;
}
   .content-head{
    width: 100%;
    padding: 20px 30px;
    box-sizing: border-box;
   }
  }
   .content-body{
    position: absolute;
    width: 300px;
    top: 55%;
    left: 50%;
    transform: translate(-50%,-50%);
   }
  .reset-success{
    text-align: center;
    margin: 60px 0;
    transform: scale(2.5);//将图片放大到原来的2.5倍
  }
}
.el-button {
  border-radius: 10px;
  height: 40px;
  width: 300px;
  color: #ffffff;
  background-color: rgba(24, 145, 255, 1);
}
.el-button:hover{
  background-color:#66b1ff;
}
.el-input{
  height: 40px;
}
</style>